<template>
	<view class="page" style="" >
		<nav-bar @selectSewlingLine="selectSewlingLine" />
		<view class="search-content">
			<view class="item">
				<text class="text">{{$t('production.ProductionAdjustment.5q5bghhv8f00')}}</text>
				<view class="search-input">
					<u-input v-model="data.styleNo">
						<template slot="suffix">
							<view @click="search">
							<uni-icons type="search" size="30" color="#ccc"></uni-icons>
							</view>
						</template>
					</u-input>
				</view>
			</view>
			<view class="item">
				<text class="text">{{$t('production.ProductionAdjustment.5q5bghhvdak0')}}</text>
				<view class="search-input">
					<u-input v-model="data.billNo">
						<template slot="suffix">
							<view @click="search">
							<uni-icons type="search" size="30" color="#ccc"></uni-icons>
							</view>
						</template>
					</u-input>
				</view>
			</view>
		</view>
		<view class="ul" ref="scrollContainer" >
			<view class="li-item" v-for="item in lists" :key="item.id">
				<adjustItem :data="item" @jumpTo='jumpTo' />
			</view>
		</view>
		<view class="footer">
			<u-button class="btn" @click="backTo">
			 <text class="text">{{ $t('common.return') }}</text>
			</u-button>
		</view>
	</view>
</template>

<script>
import navBar from "@/components/nav-portrait/index.vue"
import adjustItem from "./components/adjustItem.vue"
import {getChangeProductionPage} from "../../../api/adjust.js"
export default{
	components:{navBar,adjustItem},
	data() {
		return {
			//竖屏
			type: 'portrait',
			lists:[],
			sewingId: '',
			data:{
				page:1,
				limit: 9999,
				styleNo: '',
				billNo:''
			},
		}
	},
	methods: {
		search() {
			this.getList()
		},
		backTo() {
			uni.navigateTo({
				url:`/pages/quality/production/toPortrait?sewingId=${this.sewingId}`
			})
		},
		selectSewlingLine(id) {
			this.sewingId = id
			this.getList()
		},
		jumpTo(item) {
			this.$store.commit('SET_PRODUCTION_ITEM', item)
			uni.navigateTo({
				url: `/pages/quality/production/AdjustContent?productionId=${item.id}&sewingId=${this.sewingId}`
			})
		},
		getList() {
			let params = {
				...this.data,
				sewingId: this.sewingId
			}
			getChangeProductionPage(params).then(res => {
				if(res.code !== 0) {
					return
				} 
				this.lists = res.data.list
				this.lists.forEach(list => {
					if(JSON.parse(list.images).length) {
						list.itemImg = JSON.parse(list.images)[0].src
					} else {
						list.images = null
					}
				} )
			})
		},

		init() {
			this.getList();
		}
	},

	onShow() {
		this.$store.commit('SET_SEWING_LIST', [])
	},
	onLoad(option) {
		this.sewingId = option.sewingId
		
		this.init()
		// plus.webview.currentWebview().setStyle({
		//   'popGesture': 'none'
		// });
		
	},
	onBackPress(event) {
		if(event.from === 'backbutton') {
			return true
		}
	},
	mounted() {
	}
}
</script>

<style lang="scss" scoped>
	.page{
		position: fixed;
		height: 100vh;
		width: 100vw;
		// font-size: 1.2rem;
		background: #F3F3F3;
		overflow: hidden;
		// overflow-y: hidden;
		// overflow-x: auto;
		// box-sizing: border-box;
		flex-grow: 1;
		// overflow-y:auto; 
		.search-content {
			height: 86rpx;
			opacity: 1;
			width: 100%;
			background: #FFFFFF;
			
			box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
			display: flex;
			.item {
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				.text {
					flex: 0 0 55rpx;
					font-family: AlibabaPuHuiTi;
					font-size: 18rpx;
					font-weight: bold;
					line-height: 24rpx;
					letter-spacing: 0px;
					color: #333333;
					margin: 0 20rpx;
				}
				.search-input {
					flex: 1;
				}
			}
		}
		::v-deep .u-input {
		      height: 40rpx;
			  width: 260rpx;
		    }
		.ul {
			height: calc(100vh - 260rpx);
			overflow-y: auto;
		}
		.footer {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 53rpx;
			background-color: #FFFFFF;
			line-height: 53rpx;
			color: #000;
			box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.3);
			.btn {
				width: 30%;
				margin-left: 2%;
				margin-top: 9rpx;
				.text {
					font-size: 24rpx;
					font-weight: 500;
					color: #585858;
				}
			}
		}
	}
</style>
